<template>
  <div class="image-preview-container">
    <div class="flex justify-center">
      <img :src="previewUrl" class="preview-image" loading="lazy" />
    </div>

    <!-- 缩略图列表 -->
    <div class="thumbnail-list" v-if="props.currentImages.length > 0">
      <div class="thumbnail-wrapper">
        <div
          v-for="(item, index) in props.currentImages"
          :key="item"
          class="thumbnail-item"
          :class="{ active: item === previewUrl }"
          @click="handlePreview(item, index)"
        >
          <img
            :src="item"
            :alt="`缩略图 ${index + 1}`"
            class="thumbnail-image"
            loading="lazy"
          />
          <div class="thumbnail-overlay"></div>
        </div>
      </div>
    </div>

    <!-- 图片信息 -->
    <div class="text-center" v-if="props.currentImages.length > 0">
      {{ currentIndex + 1 }} / {{ props.currentImages.length }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onDeactivated, watch } from "vue";

// 定义组件属性
const props = defineProps<{
  currentImages: string[];
}>();

// 响应式数据
const previewUrl = ref(props.currentImages?.[0] || "");

// 计算当前图片索引
const currentIndex = computed(() => {
  return props.currentImages.findIndex(img => img === previewUrl.value);
});

// 处理图片预览点击事件
const handlePreview = (url: string, index?: number) => {
  console.log(`切换预览图片: ${url}, 索引: ${index ?? currentIndex.value}`);
  previewUrl.value = url;

  // 滚动到对应的预览项
  if (index !== undefined) {
    scrollToPreviewItem(index);
  }
};

// 滚动到指定的预览项
const scrollToPreviewItem = (index: number) => {
  const scrollContainer = document.querySelector(".main-preview-scroll");
  const previewItems = document.querySelectorAll(".preview-item");

  if (scrollContainer && previewItems[index]) {
    const targetItem = previewItems[index] as HTMLElement;
    const containerWidth = scrollContainer.clientWidth;
    const itemWidth = targetItem.offsetWidth;
    const itemLeft = targetItem.offsetLeft;

    // 计算滚动位置，使目标项居中显示
    const scrollLeft = itemLeft - (containerWidth - itemWidth) / 2;

    scrollContainer.scrollTo({
      left: scrollLeft,
      behavior: "smooth"
    });
  }
};
</script>

<style lang="scss" scoped>
.image-preview-container {
  @apply w-full;

  .preview-image {
    height: 800px;
    object-fit: contain;
    transition: all 0.3s ease;
  }

  .thumbnail-list {
    @apply w-full;
    margin-top: 16px;

    .thumbnail-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 8px;
      scrollbar-width: thin;
      scrollbar-color: #e5e7eb transparent;

      &::-webkit-scrollbar {
        height: 6px;
      }

      &::-webkit-scrollbar-track {
        @apply bg-gray-100 rounded-full;
      }

      &::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded-full;

        &:hover {
          @apply bg-gray-400;
        }
      }
    }

    .thumbnail-item {
      position: relative;
      flex-shrink: 0;
      cursor: pointer;
      width: 100px;
      height: 100px;
      border-radius: 8px;
      overflow: hidden;
      transition: all 0.3s ease;
      border: 2px solid transparent;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

        .thumbnail-overlay {
          opacity: 0.3;
        }
      }

      &.active {
        border-color: #409eff;
        box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);

        .thumbnail-overlay {
          opacity: 0;
        }
      }

      .thumbnail-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .thumbnail-overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: black;
        opacity: 0.2;
        transition: opacity 0.3s ease;
      }
    }
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
</style>
